<template>
  <div class="oppen">
    <el-button
      type="primary"
      @click="dialogFormVisible = true"
      class="edit"
      size="small"
      modal="true"
      destroy-on-close="true"
      >编辑</el-button
    >

    <el-dialog
      title="人员修改"
      :visible.sync="dialogFormVisible"
      class="openin"
    >
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth" class="nameip">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth" class="nameip">
          <el-input v-model="form.age" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          label="身份证号码"
          :label-width="formLabelWidth"
          class="numberip"
        >
          <el-input v-model="form.idname" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          label="手机号码"
          :label-width="formLabelWidth"
          class="numberip"
        >
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-button type="danger" :plain="true" @click="open4" size="small" >删除</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    handleDelete(index, row) {
      console.log(index, row);
    },
    open4() {
      this.$message.error("已删除人员");
    },
  },
  computed:{
    
  }
};
</script>
<style lang="less">
.nameip {
  width: 40%;
}
.numberip {
  width: 50%;
}
.edit {
  margin-right: 20px;
}
.openin {
  text-align: left;
}
</style>